<template>
  <div>
<div class="but">
  <div class="add" @click="centerDialogVisible = true"><el-button  type="warning" icon="el-icon-plus">新建</el-button></div>
  <div @click="peizhiopen"><el-button  type="warning">工单配置</el-button></div>
</div>
<el-table
  :data="list"
    border
    style="width: 100%"
    :index="indexMethod">
    <el-table-column
      fixed
     type="index"
      label="序号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="taskCode"
      label="工单编号"
      width="130">
    </el-table-column>
     <el-table-column label="工单类型">
            <template slot-scope="scope">
              <span>{{ scope.row.taskType.typeName }}</span>
            </template>
          </el-table-column>
    <el-table-column label="工单方式">
            <template slot-scope="scope">
              <span>{{ scope.row.createType ? "手动" : "自动" }}</span>
            </template>
          </el-table-column>
    <el-table-column label="工单状态">
            <template slot-scope="scope">
              <span>{{ scope.row.taskStatusTypeEntity.statusName }}</span>
            </template>
             </el-table-column>
    <el-table-column
      prop="userName"
      label="运营人员"
      width="130">
    </el-table-column>
     <el-table-column
      prop="createTime"
      label="创建日期"
      width="200">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="200">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
      </template>
    </el-table-column>
  </el-table>
<!-- 弹框 -->
<el-dialog
  title="新增工单"
  :visible.sync="centerDialogVisible"
  width="50%"
  center>
  <el-form label-width="120px"  :model="formData"
      :rules="formDataRules">
      <el-form-item label="设备编号" prop="name">
        <el-input
          v-model="formData.name"
          style="width: 80%"
          placeholder="1-50个字符"
        />
      </el-form-item>
      <el-form-item label="工单类型" prop="code">
          <el-select
          v-model="formData.manager"
          style="width: 80%"
          placeholder="请选择"
        >
          <el-option label="餐厅名" value="1"></el-option>
    </el-select>
      </el-form-item>
        <el-form-item label="补货数量">
    <div><p class="el-icon-tickets" style="color: #5f84ff;">补货清单</p></div>
    </el-form-item>
      <el-form-item label="运营人员" prop="manager">
        <el-select
          v-model="formData.manager"
          style="width: 80%"
          placeholder="请选择"
        />
      </el-form-item>
      <el-form-item label="备注" prop="introduce">
        <el-input
          v-model="formData.introduce"
          style="width: 80%"
          placeholder="1-300个字符"
          type="textarea"
          :rows="3"
        />
      </el-form-item>
    </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
<!-- 工单配置 -->
<el-dialog
  title="工单配置"
  :visible.sync="visible"
  width="50%"
 >
  <el-form label-width="120px"  >
      <el-form-item label="工单警戒线">
  <el-input-number size="20px" v-model="num" controls-position="right" @change="maxmin" :min="1" :max="100"></el-input-number>
      </el-form-item>
  </el-form>
   <span slot="footer" class="dialog-foote">
    <el-button @click="visible = false">取 消</el-button>
    <el-button type="primary" @click="huoquclick">确 定</el-button>
  </span>
</el-dialog>

  </div>
</template>

<script>
import { alertValue, Value } from '@/api/list'
export default {
  props: {
    list: {
      type: Array,
      required: true
    },
    // 接收传过来的函数
    xuanlist: {
      type: Function,
      default: () => {}
    }

  },
  data () {
    return {
      num: '', // 工单配置数量
      visible: false,
      centerDialogVisible: false,
      formData: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '', // 部门介绍
        value: ''
      },
      // 校验
      formDataRules: {
        name: [
          {
            required: true,
            message: '设备名称不能为空',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 50,
            message: '部门名称要求1-50个字符',
            trigger: 'blur'
          }
        ],
        code: [
          {
            required: true,
            message: '部门编码不能为空',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 50,
            message: '部门编码要求1-50个字符',
            trigger: 'blur'
          }
        ],
        manager: [
          {
            required: true,
            message: '部门负责人不能为空',
            trigger: 'blur'
          }
        ],
        introduce: [
          {
            required: true,
            message: '部门介绍不能为空',
            trigger: 'blur'
          },
          {
            trigger: 'blur',
            min: 1,
            max: 300,
            message: '部门介绍要求1-50个字符'
          }
        ]
      }
    }
  },
  created () {
  },
  methods: {
    handleClick (row) {
      console.log(row)
    },
    // 索引
    indexMethod (index) {
      return index + 1
    },
    maxmin (value) {
      console.log(value)
      // alertValue({
      //   alertValue: this.value
      // })
    },
    // 打开获取数据
    peizhiopen () {
      Value(50)
      this.visible = true
    },
    // 最大的容器确定按钮
    async   huoquclick () {
      await alertValue({
        alertValue: this.num
      })
      this.xuanlist()
      this.visible = false
    }

  }
}
</script>

<style lang="scss" scoped>
.add{
  width: 90px;
  height: 40px;
  margin-left: 1px;
  margin-bottom: 18px;
}
.but{
  display: flex;
  div{
    margin-right: 10px;
  }
  .el-input-number{
    width: 0px;
  }
  .dialog-foote{
margin-left: 50%;
width: 450px;
  }
  .el-dialog__footer{
width: 450px;
  }
}
</style>
